import { Button, message, Tag } from "antd";
import { pagePunch, delPunch } from "@/api/flandre-ui/request";
import { BasicTable, useTable, BasicColumn, TableAction } from "@/components/Table";
import DetailDrawer_AddUpdate from "./components/DrawerAddUpdate";
import { useDrawer } from "@/components/Drawer";
import "./index.less";
import { useTranslation } from "react-i18next";
import { IconEnum } from "@/enums/appEnum";

export default function PunchManagement() {
	const { t } = useTranslation();
	const en_vi = "HRMS.punchManagement";
	const [drawer_add_update, { openDrawer: openDrawerAddUpdate }] = useDrawer();

	// Table columns definition
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.staffId`),
			dataIndex: "staffId",
			width: 100
		},
		{
			title: t(`${en_vi}.staffName`),
			dataIndex: "staffName",
			width: 100
		},
		{
			title: t(`${en_vi}.clockInTime`),
			dataIndex: "lockinDtime",
			width: 200
		},
		{
			title: t(`${en_vi}.clockInArea`),
			dataIndex: "lockinAreaId",
			width: 150
		},
		{
			title: t(`${en_vi}.addressInfo`),
			dataIndex: "addrInfo",
			width: 200
		},
		{
			title: t(`${en_vi}.longitude`),
			dataIndex: "addrLongitude",
			width: 150
		},
		{
			title: t(`${en_vi}.latitude`),
			dataIndex: "addrLatitude",
			width: 150
		},
		{
			title: t(`${en_vi}.countryCode`),
			dataIndex: "countryCode",
			width: 150
		},
		{
			title: t(`${en_vi}.provinceCode`),
			dataIndex: "provinceCode",
			width: 150
		},
		{
			title: t(`${en_vi}.cityCode`),
			dataIndex: "cityCode",
			width: 150
		},
		{
			title: t(`${en_vi}.districtCode`),
			dataIndex: "districtCode",
			width: 150
		},
		{
			title: t(`${en_vi}.detailedAddress`),
			dataIndex: "addrDetail",
			width: 200
		},
		{
			title: t(`${en_vi}.status`),
			dataIndex: "status",
			width: 100,
			render: value =>
				value === 1 ? <Tag color="success">{t(`${en_vi}.active`)}</Tag> : <Tag color="error">{t(`${en_vi}.inactive`)}</Tag>
		},
		{
			title: t("felix_ui.action"),
			key: "actions",
			fixed: "right",
			width: 220,
			render: (_, record) => (
				<TableAction
					actions={[
						{
							icon: IconEnum.EDIT,
							label: t("felix_ui.edit"),
							onClick: handleEdit.bind(record)
						},
						{
							icon: IconEnum.DELETE,
							label: t("felix_ui.delete"),
							popConfirm: {
								title: t("common.deleteMessage"),
								placement: "left",
								confirm: handleDelete.bind(null, record)
							}
						}
					]}
				></TableAction>
			)
		}
	];

	const [punchTable, { reload }] = useTable({
		api: pagePunch,
		columns,
		showTableSetting: false,
		showIndexColumn: false
	});

	// Edit
	const handleEdit = (record: Recordable) => {
		openDrawerAddUpdate(true, { record, action: "edit" });
	};

	// Add
	const handleAdd = () => {
		openDrawerAddUpdate(true, { action: "add" });
	};

	// Delete
	const handleDelete = async (id: any) => {
		try {
			await delPunch(id);
			message.success(t("viewComponents.patientInformation.deleteSuccessfully"));
			reload();
		} catch (error) {
			t("viewComponents.patientInformation.deleteFailed");
		}
	};

	return (
		<div className="pagePunches">
			<div>
				<div className="box1">
					<h1 className="title">{t(`${en_vi}.punchManagement`)}</h1>
					<Button type="primary" onClick={handleAdd}>
						+ {t(`${en_vi}.addPunch`)}
					</Button>
				</div>
				<BasicTable register={punchTable}></BasicTable>
			</div>
			<DetailDrawer_AddUpdate reload={reload} register={drawer_add_update}></DetailDrawer_AddUpdate>
		</div>
	);
}
